<template>
	<!-- 下拉选择器，用于选择物品 -->
	<el-popover v-model="isShow" trigger="click" class="item_filter_picker el-select">
		<!-- 物品列表 -->
		<div class="list_container" :style="{ width: listWidth }">
			<!-- 搜索栏 -->
			<div class="search">
				<el-input v-model="searchName" @input="handleFilter" placeholder="未选择物品" class="text" clearable />
			</div>
			<!-- 循环渲染物品列表 -->
			<div class="item_list">
				<div v-for="(item, index) in filteredList" :key="item.id" v-show="item.isShow" class="item"
					@click="handleSelect(item)">
					<!-- 物品图标 -->
					<my-image type="items" :icon="item.iconUrl" :size="32" />
					<!-- 物品名称 -->
					<p>{{ item.name }}</p>
				</div>
			</div>
		</div>
		<!-- 选择器的引用元素 -->
		<div slot="reference" ref="popoverReference" class="item_show el-input" @mouseenter="isHover = true"
			@mouseleave="isHover = false">
			<!-- 已选择物品的图标 -->
			<my-image v-if="selectedItem" class="image" type="items" :icon="selectedItem.iconUrl" :size="32" />
			<!-- 已选择物品的名称 -->
			<input v-model="selectedItem.name" placeholder="未选择物品" class="text el-input__inner" />
			<!-- 下拉箭头和清除按钮 -->
			<span class="el-input__suffix">
				<span class="el-input__suffix-inner">
					<i :class="'el-select__caret el-input__icon el-icon-arrow-up' + (isShow ? ' is-reverse':'')" />
				</span>
			</span>
		</div>
	</el-popover>
</template>

<script>
	import Vue from 'vue';
	import MyImage from '@/components/Image.vue';

	export default {
		name: 'ItemFilterPicker',
		components: {
			MyImage,
		},
		props: {
			// 传入的id
			id: {
				type: Number,
				default: null,
			},
			// 物品列表
			items: {
				type: Array,
				default: () => [],
			},
			// 是否可清楚
			clearable: {
				type: Boolean,
				default: false,
			},
		},
		emits: ['change'],
		data() {
			return {
				selectedItem: null, // 当前选中的物品
				searchName: "", //搜索名
				filteredList: [],
				listWidth: null,
				isShow: false,
				isHover: false,
			};
		},
		computed: {
			// 是否显示清除按钮
			clearShow() {
				return this.clearable && this.selectedItem != null && this.isHover;
			},
		},
		watch: {
			// 监听 id 属性的变化，更新索引
			id: {
				handler() {
					if (this.id == null) {
						this.selectedItem = null; // 选中的物品
						this.searchName = null; // 物品搜索名同时也是物品显示名
						this.handleFilter();
					} else {
						this.selectedItem = this.items.find((item) => item.id == this.id); // 选中的物品
						this.handleFilter();
					}
				},
				immediate: true,
			},
			// 监听 items 属性的变化，更新过滤列表和索引
			items: {
				handler() {
					this.selectedItem = this.items.find((item) => item.id == this.id); // 选中的物品
					this.handleFilter();
				},
				immediate: true,
			},
		},
		methods: {
			// 处理物品选择
			handleSelect(item) {
				// console.log("item", item.id);
				this.$emit('change', item.id);
				this.isShow = false;
			},
			// 更新过滤列表
			handleFilter() {
				this.filteredList = this.items.filter((item) => {
					return item.name.toLowerCase().includes(this.searchName.toLowerCase().trim());
				});
			},
		},
		mounted() {
			this.$nextTick(() => {
				const inputWidth = 500;
				this.listWidth = inputWidth + 'px';
			});
		}
	};
</script>

<style lang="less" scoped>
	.item_filter_picker {
		width: 100%;
		height: 40px;
		display: inline-block;

		.item_show {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;

			.image {
				position: absolute;
				z-index: 9;
				margin-left: 10px;
			}

			.text {
				position: relative;
				padding-left: 50px;
			}

			.select_icon {
				position: absolute;
				color: #C2C6CE;
				left: calc(100% - 30px);
				transition: transform 0.3s;
			}

			.select_icon.is-reverse {
				transform: rotate(180deg);
			}
		}
	}

	.list_container {
		width: 100%;
		/* 确保物品列表的宽度与选择器的宽度一致 */

		.item_list {
			max-height: 300px;
			overflow: auto;

			.item {
				display: flex;
				align-items: center;
				gap: 10px;

				&:hover {
					background-color: #F5F7FA;
				}
			}

		}

	}
</style>